<template>
    <div class="footer">
        <el-dialog v-model="isDetailShowed" :title="currentTitle" width="50%" :html="true" align-center
            class="footer-dialog">
            <div v-html="currentData"></div>
        </el-dialog>
        <div class="footer-title">
            <p class="title-head font-xbs"><span style="color: #fa7c0a;">XJTU</span>集约化网站</p>
            <p>2024年JavaEE组04组网站集约化建设</p>
        </div>
        <div class="more">
            <!-- <div class="footer-about">
                <div class="about-title unselectable">关于</div>
                <div class="about-title-detail" v-for="(title, index) in aboutUs.titles" :key="index"
                    @click="showDetail(index)">{{
                        title }}</div>
            </div> -->
            <div class="footer-link">
                <div class="link-title unselectable">友情链接</div>
                <div><a href="http://www.xjtu.edu.cn/" target="_blank">西安交通大学</a></div>
                <div><a href="http://se.xjtu.edu.cn" target="_blank">西安交通大学软件学院</a></div>
            </div>
        </div>
        <!-- <div class="footer-jiekun"></div> -->
    </div>
</template>

<script setup lang="ts">
import escape2html from '@/api/escape2html'
import { onMounted, reactive, ref } from 'vue';

const { toHtml } = escape2html()
const currentData = ref('')
const currentTitle = ref('')
const isDetailShowed = ref(false)
const aboutUs = reactive({
    footer: [] as aboutUsDetail[],
    titles: [] as string[],
})

type aboutUsDetail = {
    content: string,
    id: number,
    sort: string,
    title: string,
}

onMounted(async () => {
})

const showDetail = (index: number) => {
    currentData.value = toHtml(aboutUs.footer[index].content)
    currentTitle.value = aboutUs.footer[index].title
    isDetailShowed.value = true
}

</script>

<style>
.footer-dialog {
    .el-dialog__header {
        margin: 0;
        padding: 40px 40px 0 40px;
    }
    
    .el-dialog__body {
        padding: 20px 40px 40px 40px;
    }

    .el-dialog__title {
        font-size: 24px;
        color: #fa7c0a;
        font-weight: 500;
    }
}

.about-title-detail {
    cursor: pointer;
}

.about-title-detail:hover {
    color: #fa7c0a !important;
}

.footer {
    width: 100%;
    height: 365px;
    box-shadow: inset 0px 30px 20px -10px rgba(0, 0, 0, 0.1);
    padding-top: 10px;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 100px;
}

.footer-title {
    width: 50%;
    height: 80%;
    padding: 0 80px;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.footer-title>p {
    margin: 10px;
}

.title-head {
    font-size: 40px;
    font-weight: 525;
}

.footer-jiekun {
    background-image: url(/assets/imgs/jiekunFooter.jpg);
    width: 216px;
    height: 78px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    left: 0;
    bottom: 0;
}

.more {
    display: flex;
    align-items: start;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: 120px;
}

.footer-about,
.footer-link {
    width: 150px;
    height: max-content;
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.footer-about>div,
.footer-link>div {
    margin: 10px;
}

.footer-about>div:not(.about-title),
.footer-link>div:not(.link-title) {
    color: #a2a5a9;
}

.about-title,
.link-title {
    font-size: 25px;
    font-weight: 550;
}

a {
	text-decoration: none;
	outline: none;
	color: #a2a5a9;
}
</style>